<template>
	<div>
		<div class="ui top attached segment" style="text-align: center">
			<h2 class="m-text-500">文章归档</h2>
			<p>博主共发表 {{ count }} 篇博客</p>
		</div>
		<div class="ui attached segment">
			<div class="timeline" style="max-width: 94%;">
				<div class="block">
					<el-timeline style="margin-left: -1.875rem;">
						<el-timeline-item v-for="(value,key,index) in blogMap" :key="index">
							<p style="font-size: 1.5rem;">{{key}}</p>
							<el-card>
								<div v-for="blog in value" :key="blog.id" style="display: flex;">
									<div style="font-size: 1.5rem;margin-top: 1.125rem;margin-bottom: 1.125rem;white-space: nowrap;">{{ blog.day }}</div>
									<a href="javascript:;" @click.prevent="toBlog(blog)">
										<div style="font-size: 1.5rem;margin-top: 1.125rem;margin-left: 0.9375rem;margin-bottom: 1.125rem;">{{ blog.title }}</div>
									</a>
								</div>
							</el-card>
						</el-timeline-item>

					</el-timeline>
				</div>
			</div>
		</div>
	</div>


</template>

<script>
	import {
		getArchives
	} from "@/api/archives";

	export default {
		name: "Archives",
		data() {
			return {
				blogMap: {},
				count: 0,
				colorObj: {
					0: 'tl-blue',
					1: 'tl-dark',
					2: 'tl-green',
					3: 'tl-purple',
					4: 'tl-red',
				}
			}
		},
		beforeRouteEnter(to, from, next) {
			next(vm => {
				if (from.name != 'blog') {
					vm.scrollToTop()
				}
			})

		},
		created() {
			this.getArchives()
		},
		methods: {
			getArchives() {
				getArchives().then(res => {
					if (res.code === 200) {
						this.blogMap = res.data.blogMap
						this.count = res.data.count
					} else {
						this.msgError(res.msg);
					}
				}).catch(() => {
					this.msgError("请求失败");
				})
			},
			toBlog(blog) {
				this.$store.dispatch('goBlogPage', blog)
			}
		}
	}
</script>

<style scoped>
	.timeline {
		margin: 20px 0;
	}

	.tl-header {
		width: 12em;
		text-align: center;
	}

	.tl-date {
		position: relative;
		top: 10px;
		display: block;
		float: left;
		width: 4.5em;
		margin-left: -7.5em;
		text-align: right;
	}

	.tl-wrap {
		padding: 15px 0 15px 20px;
		margin-left: 6em;
		border-style: solid;
		border-width: 0 0 0 4px;
	}

	.tl-wrap:before {
		position: relative;
		top: 15px;
		float: left;
		width: 10px;
		height: 10px;
		margin-left: -27px;
		background: #fff;
		border-color: inherit;
		border-style: solid;
		border-width: 3px;
		border-radius: 50%;
		content: "";
		box-shadow: 0 0 0 4px #bfbfbf;
	}



	.tl-title {
		margin-left: 0 !important;
		letter-spacing: 0.3px !important;
		font-size: 1.5625rem !important;
		font-weight: 500 !important;
		padding: 12px 15px !important;

	}

	.tl-blue .tl-header a,
	.tl-blue .tl-item .tl-title {
		background: #606266 !important;
		color: #fff !important;
		font-size: 1.3625rem;
	}

	.tl-blue .tl-item .tl-wrap {
		border-color: #606266;
		font-size: 1.3625rem;
	}

	.tl-dark .tl-header a,
	.tl-dark .tl-item .tl-title {
		background: #606266 !important;
		color: #fff !important;
		font-size: 1.3625rem;
	}

	.tl-dark .tl-item .tl-wrap {
		border-color: #606266;
		font-size: 1.3625rem;
	}

	.tl-green .tl-header a,
	.tl-green .tl-item .tl-title {
		background: #27c24c !important;
		color: #fff !important;

	}

	.tl-green .tl-item .tl-wrap {
		border-color: #27c24c;
	}

	.tl-purple .tl-header a,
	.tl-purple .tl-item .tl-title {
		background: #7266ba !important;
		color: #fff !important;
	}

	.tl-purple .tl-item .tl-wrap {
		border-color: #7266ba;
	}

	.tl-red .tl-header a,
	.tl-red .tl-item .tl-title {
		background: #F56C6C !important;
		color: #fff !important;
	}

	.tl-red .tl-item .tl-wrap {
		border-color: ##F56C6C;
	}
</style>
